<template>
	
	<view class="d-flex border-top border-light-secondary animate__fadeIn animate__fast" style="width: 100%;box-sizing: border-box;height: 100%;">
		
		<loading-plus v-if="beforeReady"></loading-plus>
		
		<view class="position-fixed top-0 right-0 bottom-0 left-0 bg-white font-md d-flex a-center j-center main-text-color"
		style="z-index: 10000;"
		v-if="beforeReady">
			加载中...
		</view>
		
		<scroll-view id="leftScroll" scroll-y style="flex: 1;height: 100%;"
		class="border-right"
		:scroll-top="leftScrollTop">
			<view class="border-bottom border-light-secondary py-1 left-scroll-item"
			v-for="(item, index) in cate" :key="index"
			@tap="changeIndex(index)"
			
			hover-class="bg-light-secondary">
				<view class="py-1 font-md text-muted text-center"
				:class="activeIndex === index ? 'class-active' : ''">{{item.name}}</view>
			</view>
		</scroll-view>
		<scroll-view scroll-y style="flex: 3.5;height: 100%;"
		:scroll-top="rightScrollTop"
		@scroll="onRightScroll">
			<view class="row right-scroll-item"
			v-for="(item, index) in list" :key="index">
				<view class="span24-8 text-center py-2"
				v-for="(item2, index2) in item.list" :key="index2">
					<image :src="item2.src"
					style="width: 120upx;height: 120upx;"></image>
					<text class="d-block">{{item2.name}}</text>
				</view>
				
			</view>
		</scroll-view>
	</view>
	
</template>

<script>
	import loading from "@/common/mixin/loading.js"
	
	export default {
		mixins: [loading],
		
		data() { 
			return {
				showLoading: true,
				activeIndex: 0,
				cate: [],
				list: [],
				leftDomsTop: [],
				rightDomsTop:[],
				rightScrollTop: 0,
				cateItemHeight: 0,
				leftScrollTop: 0,

			}
		},
		onLoad() {
			this.getData()
			
		},
		onReady() {
			//加载left scroll view 各个dom的信息
			this.getEleInfo({
				all: 'left',
				size: true,
				rect: true
			}).then( data => {
				this.leftDomsTop = data.map(v => {
					this.cateItemHeight = v.height
					return v.top
				})
			})
			
			//加载right scroll view 各个dom的信息
			this.getEleInfo({
				all: 'right',
				size: false,
				rect: true
			}).then( data => {
				this.rightDomsTop = data.map(v => v.top)
			})
			
		},
		watch: {
			activeIndex(newValue, oldValue) {
				//h获取scroll-view的高度，scroll-top信息
				const query = uni.createSelectorQuery().in(this)
				query.select('#leftScroll').fields(
					{size: true, scrollOffset:true}, data => {
					//scroll的高度
					let H = data.height
					let ST = data.scrollTop
					// 下边
					let currActiveHeight = this.leftDomsTop[newValue] + this.cateItemHeight
					if (currActiveHeight > (H + ST)) {
						return this.leftScrollTop = currActiveHeight - H
					}
					//上边
					if (ST >= this.cateItemHeight - 1) {
						this.leftScrollTop = this.leftDomsTop[newValue]
					}
					
				}).exec();
			}
		},
		methods: {
			//获取节点信息的方法
			getEleInfo(obj = {}) {
				return new Promise((res, rej) => {
					let option = {
						size: obj.size ? true : false,
						rect: obj.rect ? true : flase,
					}
					const query = uni.createSelectorQuery().in(this)
					let q = query.selectAll(`.${obj.all}-scroll-item`)
					q.fields(option, data => {
						res(data)
					}).exec();
				})
				
			},
			//监听右边滚动事件
			async onRightScroll(e) {
				//console.log(e.detail.scrollTop)
				//匹配右边的位置所处的左边index
				//v是value，k是index
				this.rightDomsTop.forEach((v, k) => {
					if(v <= e.detail.scrollTop + 3){
						this.activeIndex = k
						return false
					}
					
				})
			},
			
			//点击左边分类
			changeIndex(index) {
				this.activeIndex = index
				//滚动右边scroll-view 到对应的位置
				this.rightScrollTop = this.rightDomsTop[index]
			},
			
			getData() {
				for (let i = 0; i < 20; i++) {
					this.cate.push({
						name: "分类" + i
					})
					this.list.push(
						{
							list: []
						}
					)
					for (let j = 0; j < 20; j++) {
						this.list[i].list.push(
							{
								src: "/static/images/demo/cate_02.png",
								name: `分类${i}_商品${j}`
							}
						)
					}
				}
				this.$nextTick(function(){
					this.showLoading = false
				})
			}
		}
	}
</script>

<style>
.class-active {
	border-left: 8upx solid #FD6801; 
	color: #FD6801 !important;
}
</style>
